<template>
  <div
    class="preview-scan-image"
    :style="layoutDisplay"
  >
    <PreviewScanColumn
      v-for="(item, index) in columnComputed"
      :ref="item.key"
      :key="item.key"
      :signal="`${item.key}-${index}`"
      :img-list="scanFilter(item)"
      :mode="curMode"
      :column="config"
      :show-clip="clipControlStatus(item)"
      @clipSuccess="clipSuccess"
      @modeChange="modeChange"
      @pageNoChange="pageNoChange"
    />
  </div>
</template>
<script>
import PreviewScanColumn from './components/previewScanColumn';
export default {
  name: 'PreviewScanImg',
  components: {
    PreviewScanColumn,
  },
  props: {
    /**
     * 当前分栏模式
     */
    mode: {
      type: String,
      default: '',
      require: true,
    },
    /**
     * 图片数据
     */
    imgList: {
      type: Array,
      default: () => [],
      require: true,
    },
    /**
     * 分栏列表
     */
    config: {
      type: Array,
      default: () => [],
      require: true,
    },
    /**
     * 是否展示截图
     */
    showClip: {
      type: Boolean,
      default: false,
    },
    /**
     * 排版布局
     */
    layout: {
      type: String,
      default: 'column',
    },
  },
  data() {
    return {
      curMode: this.mode
    };
  },
  computed: {
    columnComputed() {
      return this.config.filter(item => !item.global) ?? [];
    },
    layoutDisplay() {
      const displayStyle = {
        column: 'column',
        row: 'row',
      };
      return {
        flexDirection: displayStyle[this.layout],
        flexWrap: 'nowrap',
      };
    },
  },
  watch: {
    mode(val) {
      this.curMode = val;
    },
    /** 监听布局改变时，触发全部的视图更新 */
    layout() {
      this.columnComputed.forEach(item => {
        this.update(item.key);
      });
    },
  },
  methods: {
    /**
     * @description 截图完成后的回调
     */
    async clipSuccess(data) {
      this.$emit('clipSuccess', data);
    },
    /**
     * file类型转base64
     * @param file
     */
    fileToBase64(file) {
      return new Promise((resolve, reject) => {
        // 创建一个新的 FileReader 对象
        const reader = new FileReader();
        // 读取 File 对象
        reader.readAsDataURL(file);
        // 加载完成后
        reader.onload = function () {
          // 将读取的数据转换为 base64 编码的字符串
          const base64String = reader.result;
          // 解析为 Promise 对象，并返回 base64 编码的字符串
          resolve(base64String);
        };
        // 加载失败时
        reader.onerror = function () {
          reject(new Error("Failed to load file"));
        };
      });
    },
    /**
     * 图片数据筛选
     * @param {*} item
     */
    scanFilter(item) {
      const scan = this.imgList.find(item1 => item1.key === item.key)?.value ?? [];
      return scan;
    },
    /**
     * 截图状态修改
     * @param {*} item
     */
    clipControlStatus(item) {
      const imgList = this.scanFilter(item);
      // 无图片数据，一定不能截图
      // 有图片数据，才由showClip控制截图
      return Boolean(imgList.length && this.showClip);
    },
    /**
     * 模式改变
     * @param {*} value 分栏值
     */
    modeChange(value) {
      this.curMode = value;
      const {
        key,
      } = this.config.find(item => item.key === value);
      this.$emit('modeChange', key);
    },
    /**
     * 页码改变
     * @param {*} data 对应分栏数据
     */
    pageNoChange(data) {
      this.$emit('pageNoChange', data);
    },
    /**
     * 刷新视图
     * @param {*} key 视图唯一key
     */
    update(key) {
      this.$nextTick(() => {
        this.$refs[key][0].updateImage();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.preview-scan-image {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
}
</style>
